<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="ui.xhtml">

	<ui:define name="head">
		<style type="text/css">
.ui-confirm-dialog-severity {
	margin: 0 7px 7px 0;
}
</style>
	</ui:define>
	<ui:define name="content">
		<p:panel header="#{msg.link_groups}" id="panel">
			<h:form>
				<p:commandButton value="#{msg.label_newgroup}"
					onclick="dlgNew.show()" icon="add" />
			</h:form>
			<!-- Formulario nueva organizacion -->
			<h:form id="frmNew">
				<p:dialog header="#{msg.label_newgroup}" widgetVar="dlgNew"
					resizable="false" modal="true" id="newDialog">
					<p:growl id="newGrowl" showDetail="false" sticky="true" />
					<h:panelGrid columns="2" style="margin-bottom:10px; width: 400px;"
						cellpadding="">
						<h:outputLabel for="name" value="#{msg.label_name}: " />
						<p:inputText id="name" required="true" size="20"
							value="#{GroupBean.name}" />
						<h:outputLabel for="description"
							value="#{msg.label_description}: " />
						<p:inputText id="description" required="true" size="30"
							value="#{GroupBean.description}" />
						<h:outputLabel for="profile" value="#{msg.label_profile}: " />
						<p:selectOneListbox id="scroll" value="#{GroupBean.profile}"
							converter="ProfileConverter" style="height:100px">
							<f:selectItems value="#{GroupBean.listProfile}" var="p"
								itemLabel="#{p.profile}" itemValue="#{p}" />
						</p:selectOneListbox>
						<f:facet name="footer">
							<p:commandButton id="submitButton" value="#{msg.label_save}"
								icon="save" actionListener="#{GroupBean.save}"
								oncomplete="dlgNew.hide();" update=":frmlist,newGrowl,newDialog" />
							<p:commandButton value="#{msg.label_cancel}"
								oncomplete="dlgNew.hide();" icon="cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:form>
			<br />
			<!-- Formulario lista de organizaciones -->
			<h:form id="frmlist">
				<p:dataTable var="group" value="#{GroupBean.listGroup}"
					paginator="true" rows="10" paginatorPosition="bottom"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="1,5,10,15,20,30">
					<h:inputHidden value="#{group.id}" />
					<p:column headerText="#{msg.label_name}">
						<h:outputText value="#{group.name}" />
					</p:column>
					<p:column headerText="#{msg.label_description}">
						<h:outputText value="#{group.description}" />
					</p:column>
					<p:column style="width:12%; text-align: center;">
						<p:commandButton oncomplete="editDialog.show()" icon="edit"
							title="#{msg.label_edit}" update=":frmEdit"
							actionListener="#{GroupBean.prepareGroup(group.id)}" />
						<p:commandButton icon="delete" title="#{msg.label_delete}"
							actionListener="#{GroupBean.prepareGroup(group.id)}"
							onclick="confirmation.show()" />
						<p:commandButton icon="groupadd"
							title="#{msg.label_aduserstogroup}"
							actionListener="#{GroupBean.prepareUserGroup(group.id)}"
							oncomplete="addDialog.show()" update=":frmAdd" />
					</p:column>
				</p:dataTable>
			</h:form>
			<!-- Formulario para editar -->
			<h:form id="frmEdit">
				<p:dialog header="#{msg.label_edit}" widgetVar="editDialog"
					resizable="false" modal="true" id="editDialog">
					<p:growl id="editGrowl" showDetail="false" sticky="true" />
					<h:panelGrid columns="2" style="margin-bottom:10px; width: 400px;">
						<h:outputLabel for="name" value="#{msg.label_name}: " />
						<p:inputText id="name" required="true" size="20"
							value="#{GroupBean.group.name}" />
						<h:outputLabel for="description"
							value="#{msg.label_description}: " />
						<p:inputText id="description" required="true" size="30"
							value="#{GroupBean.group.description}" />
						<f:facet name="footer">
							<p:commandButton value="#{msg.label_save}" icon="save"
								actionListener="#{GroupBean.edit()}"
								oncomplete="editDialog.hide();" update=":frmlist,editGrowl" />
							<p:commandButton value="#{msg.label_cancel}"
								oncomplete="editDialog.hide();" icon="cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:form>
			<!-- Formulario para eliminar Organizacion -->
			<h:form prependId="false">
				<p:growl id="deleteGlow" />
				<p:confirmDialog id="confirmDialog"
					message="#{msg.label_confirmdltgroup}" header="Borrar grupo"
					severity="alert" widgetVar="confirmation">
					<p:commandButton id="confirm" update=":frmlist,deleteGlow"
						value="#{msg.label_yes}" oncomplete="confirmation.hide()"
						actionListener="#{GroupBean.delete()}" icon="accept" />
					<p:commandButton id="decline" value="#{msg.label_no}"
						onclick="confirmation.hide()" type="button" icon="cancel" />
				</p:confirmDialog>
			</h:form>
			<!-- Formulario para agregar usuarios al grupo -->
			<h:form id="frmAdd">
				<p:dialog header="#{msg.label_adduserstogroup}"
					widgetVar="addDialog" resizable="false" modal="true" id="addDialog">
					<p:growl id="addGrowl" showDetail="false" sticky="true" />
					<h:panelGrid columns="2" style="margin-bottom:10px; width: 400px;">

						<p:pickList id="pojoPickList" value="#{GroupBean.listUsers}"
							var="user" itemValue="#{user}" itemLabel="#{user.name}"
							converter="UserConverter" showSourceControls="true"
							showTargetControls="true" showSourceFilter="true"
							showTargetFilter="true" filterMatchMode="contains">

							<f:facet name="sourceCaption">#{msg.label_freeusers}</f:facet>
							<f:facet name="targetCaption">#{msg.label_unitedtogroup}</f:facet>

							<p:ajax event="transfer" listener="#{GroupBean.onTransfer}" />
						</p:pickList>
					</h:panelGrid>
				</p:dialog>
			</h:form>
			<h:form>
				<p:growl id="msg" showDetail="true" sticky="true" />
				<!-- If idle 10 seconds, run 'idleDialog' -->
				<p:idleMonitor timeout="1700000" onidle="idleDialog.show()" />
				<p:confirmDialog id="confirmDialog"
					message="#{msg.label_confirmationendsession}"
					header="#{msg.label_expiredsession}" severity="alert"
					widgetVar="idleDialog">
					<p:commandButton id="confirm" value="#{msg.button_submit}"
						update=":panel" oncomplete="idleDialog.hide()"
						onclick="window.location='#{facesContext.externalContext.requestContextPath}/login.xhtml';" />
				</p:confirmDialog>
			</h:form>
		</p:panel>
		<p:confirmDialog header="Oooops!!!" severity="alert"
			visible="#{not empty param['expired']}" message="View has expired."
			widgetVar="confirmDlg">
			<p:commandButton type="button" value="OK" onclick="confirmDlg.hide()" />
		</p:confirmDialog>
	</ui:define>
</ui:composition>